<template>
  <div>
    <el-row class="mb-4">
      <el-badge :value="userSize" class="item" :hidden="userSize == 0">
        <el-button class="but" @click="toUserShow">个人动态</el-button>
      </el-badge>
    </el-row>

    <el-row class="mb-4">
      <el-badge :value="allSize" class="item" :hidden="allSize == 0">
        <el-button class="but" @click="toAllShow">好友动态</el-button>
      </el-badge>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import {useRouter} from "vue-router";
import {userInfo} from "../../utils/constant";
import {onMounted, ref} from "vue";
import {callbacks, MessageDto} from "../../utils/webSocket";
import {notifyMessage} from "../../utils/messageUtil";

const router = useRouter();

let userSize = ref<number>(0)
let allSize = ref<number>(0)

onMounted(() => {

  callbacks.showNotice = (messageDto: MessageDto) => {
    notifyMessage(`${messageDto.sendUserSocketDto.name}发布了一个动态`)
    allSize.value = allSize.value + 1;
  }

})

const toUserShow = () => {
  userSize.value = 0
  router.push({
    name: 'show',
    query: {
      userId: userInfo().id,
    }
  })
}

const toAllShow = () => {
  allSize.value = 0
  router.push({
    name: 'show'
  })
}

</script>

<style scoped>
.but {
  flex: 1;
  height: 50px;
  margin: 5px 0;
  width: 250px;
}

.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>